<template>
  <div>
    <el-input
      v-model="input"
      placeholder="请输入查询参数"
      class="searchInput"
    ></el-input>
    <el-button
      icon="el-icon-search"
      style="font-size: 16px;"
      @click="handleSearch"
    ></el-button>
    <el-button
      class="addButton"
      @click="handleEdit"
      icon="el-icon-circle-plus"
    ></el-button>
    <el-button
      class="delButton"
      v-if="multipleSelectionFlag"
      @click="batchRemoveBrand"
      icon="el-icon-delete"
    >
    </el-button>
    <el-table
      ref="brandTable"
      :data="brand"
      :stripe="true"
      :highlight-current-row="true"
      @selection-change="handleSelectionChange"
      tooltip-effect="dark"
      class="brandTable"
    >
      <el-table-column
        type="selection"
        width="55"
      >
      </el-table-column>
      <el-table-column
        label="品牌id"
        width="120"
      >
        <template slot-scope="scope">{{ scope.row.brandId }}</template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="品牌名"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="logo"
        label="品牌logo"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <!-- <el-image
            style="width: 80px; height: 50px;"
            :src="scope.row.logo"
            fit="fit"
          ></el-image> -->
          <img
            :src="scope.row.logo"
            style="width: 200px; height: 200px;"
          />
        </template>

      </el-table-column>
      <el-table-column
        prop="descript"
        label="介绍"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="showStatus"
        label="状态"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.showStatus"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="firstLetter"
        label="首字母"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="categoryAndBrandAssociation(scope.$index, scope.row)"
            type="primary"
          >关联</el-button>
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
          ><i class="el-icon-edit"></i></el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          ><i class="el-icon-delete"></i></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update
      v-if="addOrUpdateShow"
      ref="addOrUpdate"
      @refreshDataList="getDataList"
    ></add-or-update>
    <!-- 分类和品牌的关联关系 -->
    <category-and-brand-association
      v-if="isShow"
      ref="association"
    ></category-and-brand-association>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[3, 6, 12, 24]"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
  </div>
</template>

<script>
import AddOrUpdate from './brandDialog.vue'
import categoryAndBrandAssociation from './categoryAndBrandAssociation.vue'
export default {
  data () {
    return {
      brand: [], // 品牌列表数据
      multipleSelection: [], // 保存勾选数据
      multipleSelectionFlag: false, // 勾选时，批量删除按钮出现
      input: '', // 搜索框数据
      addOrUpdateShow: false, // 控制添加还是修改
      isShow: false, // 控制分类和品牌的关联关系的对话框是否显示
      currentPage: 1, // 当前页
      pageSize: 3, // 每页的条数
      total: 0 // 总条数
    }
  },
  methods: {
    // 分类和品牌的关联关系
    categoryAndBrandAssociation (index, row) {
      this.isShow = true
      this.$nextTick(() => {
        this.$refs.association.init(index, row)
      })
    },
    // 当表格选择项发生变化时会触发该事件
    handleSelectionChange (val) {
      this.multipleSelectionFlag = true
      this.multipleSelection = val
      if (this.multipleSelection.length === 0) {
        this.multipleSelectionFlag = false
      }
    },
    // 批量删除
    batchRemoveBrand () {
      let ids = []
      let name = []
      this.multipleSelection.forEach(item => {
        ids.push(item.brandId)
        name.push(item.name)
      })
      this.remove(ids, name)
    },
    // 修改事件
    handleEdit (index, row) {
      // this.dialogVisible = true
      // console.log(index, row)
      this.addOrUpdateShow = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(index, row)
      })
    },
    // 删除事件
    handleDelete (index, row) {
      let ids = [row.brandId]
      let name = row.name
      this.remove(ids, name)
    },

    remove (ids, name) {
      this.$confirm(`删除【${name}】品牌, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/product/brand/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getBrabnPageList(this.pageSize, this.currentPage)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 查询事件
    handleSearch () {
      this.getBrabnPageList(this.pageSize, this.currentPage, this.input)
    },
    // pageSize 改变时会触发
    handleSizeChange (size) {
      this.pageSize = size
      this.getBrabnPageList(this.pageSize, this.currentPage, this.input)
    },
    // currentPage 改变时会触发
    handleCurrentChange (currentPage) {
      this.currentPage = currentPage
      this.getBrabnPageList(this.pageSize, this.currentPage, this.input)
    },
    // 获取品牌分页信息
    getBrabnPageList (size, page, input) {
      this.$http({
        url: this.$http.adornUrl('/product/brand/list'),
        method: 'get',
        params: this.$http.adornParams({
          pageSize: size,
          currentPage: page,
          input: input
        })
      }).then(({
        data
      }) => {
        this.total = data.data.total
        this.brand = data.data.records
      })
    },
    getDataList () {
      this.getBrabnPageList(this.pageSize, this.currentPage)
    }
  },
  components: {
    AddOrUpdate,
    categoryAndBrandAssociation
  },
  created () {
    this.getBrabnPageList(this.pageSize, this.currentPage)
  }
}
</script>

<style>
.searchInput {
  width: 15%;
  margin-right: 10px;
}

.addButton {
  background: #25c6a2;
  color: #fff;
  font-size: 16px;
}

.delButton {
  background: #f4b1b6;
  color: #fff;
  font-size: 16px;
}

.brandTable {
  width: 100%;
  margin-top: 15px;
}
</style>
